<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style>
        .red {
            color: red;
        }

        .blue {
            color: blue;
        }
        
        .darkred {
            color: darkred;
        }

        .blueviolet {
            color: blueviolet;
        }

        /* 属性选择器：属性是相对于标签而言的
            所谓属性选择器就是根据指定名称的属性值来查找元素
        */

        /* 1 E[attr] 查找指定 attr 属性的 E 标签 查找拥有 style 属性的 li 标签 */
        li[style] {
            font-weight: bold;
            text-decoration: underline;
        }

        /* 2 E[attr=value] 查找指定 attr 属性 = value 值的 E 标签 */
        li[class="red"] {
            font-size: 24px;
        }

        /* 3 E[attr=value] 查找包含 attr 属性 = value 值的 E 标签 */
        li[class*="blue"] {
            font-size: 24px;
        }

        /* 
            4 E[attr^=value] 查找属性 attr 以 value 开头 的 E 标签
            5 E[attr$=value] 查找属性 attr 以value 结尾 的 E 标签
         */
    </style>
</head>
<body>
    <p style="">看看能不能也添加样式</p>
    <ol>
        <li class="red" style="">河南再次发生矿难，死亡人数超过100</li>
        <li class="blue">禽流感再次发生蔓延，温家宝指示</li>
        <li class="darkred" style="">南方作物减产，受灾面积严重</li>
        <li class="blue">猪流感在广东群体性爆发</li>
        <li class="red">河南再次发生矿难，死亡人数超过100</li>
        <li class="blueviolet">南方作物减产，受灾面积严重</li>
    </ol>
</body>
</html>